<template>
  <div class="page">
    <div class="flex align-center pointer" @click="$emit('back')">
      <img
        src="@/assets/images/back-dark.png"
        alt=""
        class="arrow"
        style="width: 16px; height: 14px"
      >
      <div class="page-brand" style="margin-bottom: 0">发布任务</div>
    </div>
    <div class="container" style="height: calc(100% - 115px)">
      <div class="grid-2 part-mt">
        <div class="left">
          <div class="grid-3">
            <div
              v-for="(item, index) in leftList"
              :key="item.name"
              :class="{ active: active === index }"
              class="pointer item g-card icon-box flex-c align-center"
              @click="active = index"
            >
              <img :src="item.icon" alt="" class="icon icon-mr">
              {{ item.name }}
            </div>
          </div>
        </div>
      </div>
      <div class="g-card part-mt">
        <el-form
          ref="ruleForm"
          :model="ruleForm"
          :rules="rules"
          label-width="120px"
        >
          <el-form-item label="任务名称" prop="taskName">
            <el-input
              v-model="ruleForm.taskName"
              placeholder="请输入任务名称"
              class="transparent semi"
            />
          </el-form-item>
          <el-form-item label="发布方式" prop="publishMethod">
            <div class="flex align-center">
              <div class="flex align-center">
                <mao-radio
                  v-model="ruleForm.publishMethod"
                  value="smart"
                  label="智能发布"
                />
                <el-popover
                  placement="top"
                  width="200"
                  trigger="hover"
                  content="可设置多账号，批量定时自动发布视频，托管发布。"
                >
                  <img slot="reference" src="@/assets/svg/qa.svg" alt="" class="qa pointer">
                </el-popover>
              </div>
            </div>
          </el-form-item>
        </el-form>
      </div>
      <div class="g-card part-mt">
        <el-form
          ref="ruleForm"
          :model="ruleForm"
          :rules="rules"
          label-width="120px"
        >
          <el-form-item label="选择图文" prop="mixedVideoIds">
            <div class="flex align-center">
              <el-button class="lg-btn transparent" style="margin-right: 15px;" @click="openVideoDrawer(0)">选择成品库</el-button>

              <upload
                ref="upload"
                :auto="false"
                :param="form"
                action="/cloudcut-api/publish/image-batch-upload"
                :limit="99"
                accept="image/*"
                @getFile="getFile"
                @getUrl="getUrl"
                @getResult="getImgResult"
              >
                <el-button class="lg-btn transparent">上传图文</el-button>
              </upload>
            </div>
          </el-form-item>
          <div v-if="imageUrls.length||categoryList.length" style="padding-left: 120px;top:-20px" class="rel">
            <div v-if="videoType==='category'" class="flex align-center flex-wrap">
              <dir-item v-for="(item) in categoryList" :key="item.id" :editable="false" only-name :item="item" style="max-width:148px;margin-bottom: 10px;margin-right: 30px;" />
            </div>
            <div v-if="imageUrls.length" class="flex flex-wrap">
              <div v-for="(item,index) in imageUrls" :key="index" class="video-item rel">
                <img src="@/assets/images/delete.png" style="width: 14px;height: 14px;top: 5px;right: 5px;" alt="" class="del pointer abs" @click="delImg(index)">
                <img :src="item" crossorigin="anonymous" alt="" class="poster">
              </div>
            </div>
          </div>

          <el-form-item label="选择账号" prop="accountIds">
            <el-button class="lg-btn transparent" @click="type='account';showAccountDrawer = true">选择账号</el-button>
            <el-select v-model="groupId" style="margin-left: 15px;border-radius: 5px;width: 250px;" :popper-append-to-body="false" class="like-btn transparent dark-placeholder" multiple placeholder="请选择发布账号分组" @change="handleGroupChange">
              <el-option
                v-for="item in groupList"
                :key="item.id"
                :label="item.groupName"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <div v-if="accountList.length" style="padding-left: 120px;top:-20px" class="rel">
            <div class="flex flex-wrap">
              <div
                v-for="(item, index) in accountList"
                :key="item.id"
                style="height: fit-content;margin-bottom: 30px;"
              >
                <AccountItem
                  v-if="item.id"
                  :item="item"
                  hide-selection
                  :index="index"
                  @del="delAccount"
                />
              </div>
            </div>
          </div>
          <el-form-item label="背景音乐" prop="musicMethod">
            <div class="flex align-center">
              <mao-radio
                v-model="ruleForm.musicMethod"
                value="0"
                label="随机音乐"
              />
              <mao-radio
                v-model="ruleForm.musicMethod"
                value="1"
                label="自定义音乐"
              />
              <mao-radio v-model="ruleForm.musicMethod" value="2" label="不启用" />
            </div>
            <div v-if="ruleForm.musicMethod=='1'">
              <el-button class="lg-btn" type="primary" style="width: 160px;" @click="showBgmModal=true">+自定义音乐（{{ musicList&&musicList.length?'已选'+musicList.length:'未选择' }}）</el-button>
            </div>

          </el-form-item>
          <el-form-item label="图片组合" prop="imageCombination">
            <div class="flex align-center">
              <mao-radio v-model="ruleForm.imageCombination" value="3" label="3个" />
              <mao-radio v-model="ruleForm.imageCombination" value="4" label="4个" />
              <mao-radio v-model="ruleForm.imageCombination" value="5" label="5个" />
              <mao-radio v-model="ruleForm.imageCombination" value="0" label="随机" />
            </div>
          </el-form-item>
          <el-form-item label="视频标题" prop="videoTitle">
            <div class="flex align-center">
              <mao-radio
                v-model="videoTitleMethod"
                value="ai"
                label="AI一键生成"
              />
              <mao-radio
                v-model="videoTitleMethod"
                value="manual"
                label="添加标题"
              />
            </div>
            <div v-if="videoTitleMethod==='ai'">
              <div v-show="!ruleForm.videoTitle" class="ai-box flex-c align-center" @click="showTitleAi = true">
                暂无标题，使用
                <span class="link">AI一键生成</span>
              </div>
              <div v-show="ruleForm.videoTitle" class="ai-box scorll-box" style="display: block;padding:5px 15px;height: 120px; overflow-y: auto;" @click="showTitleAi = true">
                <div v-for="(item,index) in videoTitle.list" :key="index" style="line-height: 1.75;">
                  <span class="index">{{ index+1 }}</span>
                  {{ item }}</div>
              </div>
            </div>

            <div v-else>
              <!-- ruleForm.videoTitle -->
              <!-- videoTitleInput -->
              <el-input
                v-model="ruleForm.videoTitle"
                style="line-height: 1.75;color: #000;"
                rows="5"
                type="textarea"
                resize="none"
                class="transparent"
                placeholder="请输入视频标题"
                @input="e=>handleInput(e,'videoTitle')"
              />
            </div>
          </el-form-item>
          <el-form-item label="视频话题" prop="videoTopic">
            <div class="flex align-center">
              <mao-radio
                v-model="videoTopicMethod"
                value="ai"
                label="AI一键生成"
              />
              <mao-radio
                v-model="videoTopicMethod"
                value="manual"
                label="添加话题"
              />
            </div>
            <div v-if="videoTopicMethod==='ai'">
              <div v-show="!ruleForm.videoTopic" class="ai-box flex-c align-center" @click="showTitleAi = true">
                暂无话题，使用
                <span class="link">AI一键生成</span>
              </div>
              <div v-show="ruleForm.videoTopic" class="ai-box scorll-box" style="display: block;padding:5px 15px;height: 120px; overflow-y: auto;" @click="showTitleAi = true">
                <div v-for="(item,index) in videoTopic.list" :key="index" style="line-height: 1.75;">
                  <span class="index">{{ index+1 }}</span>
                  #
                  {{ item }}</div>
              </div>
            </div>
            <div v-else>
              <el-input
                v-model="ruleForm.videoTopic"
                style="line-height: 1.75;color: #000;"
                rows="5"
                type="textarea"
                resize="none"
                class="transparent"
                placeholder="请输入视频话题"
                @input="e=>handleInput(e,'videoTopic')"
              />
            </div>
          </el-form-item>
          <el-form-item label="挂载类型" prop="mountType">
            <div class="flex align-center">
              <div class="flex align-center">
                <mao-radio
                  v-model="ruleForm.mountType"
                  value="poi"
                  label="POI地址"
                />
                <el-popover
                  placement="top"
                  width="200"
                  trigger="hover"
                  content="从抖音app搜索栏搜索地点，获取地址分享链接，例如：https://v.douyin.com/MnXe3S4/"
                >
                  <img slot="reference" src="@/assets/svg/qa.svg" alt="" class="qa pointer">
                </el-popover>

              </div>
              <div class="flex align-center">
                <mao-radio
                  v-model="ruleForm.mountType"
                  value="mini"
                  label="小程序"
                />
                <!-- <el-popover
                  placement="top"
                  width="200"
                  trigger="hover"
                  content="请使用客户端发布视频挂载“小程序”"
                >
                  <img slot="reference" src="@/assets/svg/qa.svg" alt="" class="qa pointer">
                </el-popover> -->
              </div>
              <div class="flex align-center">
                <mao-radio
                  v-model="ruleForm.mountType"
                  value="product"
                  label="商品橱窗"
                  disabled
                />
                <el-popover
                  placement="top"
                  width="200"
                  trigger="hover"
                  content="请使用客户端发布视频挂载“商品橱窗”"
                >
                  <img slot="reference" src="@/assets/svg/qa.svg" alt="" class="qa pointer">
                </el-popover>
              </div>

            </div>
            <div v-if="ruleForm.mountType!=='mini'" class="flex align-center part-mt">
              <el-input v-model="mountTypeValue" class="transparent" style="margin-right: 5px;width: 500px;" />
              <el-button v-if="ruleForm.mountType==='poi'" class="rel" style="top: 2px;" type="primary" @click="trans">转换</el-button>
            </div>
          </el-form-item>
          <div v-if="ruleForm.mountType==='mini'">
            <el-form-item label="小程序ID" prop="miniId">
              <el-input v-model="mountTypeValue" class="transparent" placeholder="例如: ttef9161126716152ba" style="margin-right: 5px;width: 500px;" />
            </el-form-item>
            <el-form-item label="小程序名称" prop="microAppTitle">
              <el-input v-model="ruleForm.microAppTitle" class="transparent" placeholder="小程序标题" style="margin-right: 5px;width: 500px;" />
            </el-form-item>
            <el-form-item label="小程序路径" prop="microAppUrl">
              <el-input v-model="ruleForm.microAppUrl" class="transparent" placeholder="path/pages/index" style="margin-right: 5px;width: 500px;" />
            </el-form-item>
          </div>
          <el-form-item label="发布周期" prop="dateRange" class="part-mt">
            <el-date-picker
              v-model="ruleForm.publishStart"
              type="date"
              value-format="yyyy-MM-dd"
              class="transparent"
              :picker-options="pickerOptions"
            />
            <span style="padding-left: 20px;padding-right: 20px;">到</span>
            <el-date-picker
              v-model="ruleForm.publishEnd"
              type="date"
              value-format="yyyy-MM-dd"
              class="transparent"
              :picker-options="pickerOptions2"
            />
          </el-form-item>
          <el-form-item label="发布时间" prop="publishTime">
            <div class="time-box">
              <div class="time-box-checklist">
                <mao-checkbox v-for="(item, index) in timeList" :key="index" v-model="item.checked" @change="changeTime">
                  <span style="font-size: 14px;">{{ index+'' }}点</span>
                </mao-checkbox>
              </div>
            </div>
          </el-form-item>
          <el-form-item v-if="leftList[active]&&leftList[active].value==='douyin'" label="视频同步" prop="videoSync">
            <div class="flex align-center">
              <mao-checkbox v-model="ruleForm.videoSync">
                <span style="font-size: 14px;">同步到抖音</span>
              </mao-checkbox>
              <el-popover
                placement="top"
                width="250"
                trigger="hover"
                content="勾选即代表你同意该次本软件发送视频到你的抖音账号上；在本软件删除视频，视频在抖音仍可见，要删除同步在抖音的视频，请前往抖音app操作。"
              >
                <img slot="reference" src="@/assets/svg/qa.svg" class="qa" alt="" style="margin-left: 5px;margin-top: 4px;top:3px;right:2px">
              </el-popover>
            </div>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="btm-fixed flex-c align-center" style="margin-top: 15px">
      <el-button v-if="!id" class="lg-btn" type="primary" size="small" @click="submit('add')">生成发布计划</el-button>
      <el-button v-else class="lg-btn" type="primary" size="small" @click="submit('update')">保存修改</el-button>
    </div>
    <TitleAi :show="showTitleAi" :db-data="dbData" @close="showTitleAi = false" @ok="getAi" />
    <VideoDrawer
      :show="showVideoDrawer"
      :active="videoActive"
      only-product
      @close="showVideoDrawer = false"
      @ok="getVideoIds"
    />
    <AccountDrawer
      :type="type"
      :show="showAccountDrawer"
      @ok="getAccountIds"
      @close="showAccountDrawer = false"
    />
    <BgmDialog
      :show="showBgmModal"
      @close="showBgmModal = false"
      @ok="getMusicItem"
    />
  </div>
</template>
<script>

//
import { addTask, getDetail, updateTask, transPoi } from '@/api/publish'
import { getList as getVideoList, getCategoryList } from '@/api/product'
import { getList as getAccountList } from '@/api/auth'
import { getGroupList } from '@/api/group'

export default {
  props: {
    taskType: {
      type: String,
      default: '1'
    },
    id: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      timeList: [],
      showBgmModal: false,
      bProps: {
        label: 'name',
        value: 'id'
      },
      categoryList: [],
      dbData: {},
      ruleForm: {
        musicMethod: '',
        imageCombination: '',
        publishStart: null,
        publishEnd: null,
        taskName: '',
        publishMethod: 'smart',
        videoIds: '',
        accountIds: '',
        videoTitle: '',
        mountType: '',
        publishTime: '',
        videoSync: true,
        musicId: '',
        mixedVideoIds: '',
        microAppTitle: '',
        microAppUrl: ''
      },
      musicList: [],
      rules: {
        taskName: [{ required: true, message: '此项必填', trigger: 'blur' }],
        musicMethod: [{ required: true, message: '此项必填', trigger: 'blur' }],
        imageCombination: [{ required: true, message: '此项必填', trigger: 'blur' }],
        dateRange: [{ required: true, message: '此项必填', trigger: 'blur' }],
        publishMethod: [
          { required: true, message: '此项必填', trigger: 'blur' }
        ],
        mixedVideoIds: [{ required: true, message: '此项必填', trigger: 'blur' }],
        accountIds: [{ required: true, message: '此项必填', trigger: 'blur' }],
        videoTitle: [{ required: true, message: '此项必填', trigger: 'blur' }],
        videoTopic: [{ required: true, message: '此项必填', trigger: 'blur' }],
        publishTime: [{ required: true, message: '此项必填', trigger: 'blur' }]
        // videoSync: [{ required: true, message: '此项必填', trigger: 'blur' }]
      },
      leftList: [
        {
          icon: require('@/assets/images/auth/douyin.png'),
          name: '抖音',
          value: 'douyin'
        }
      ],
      active: 0,
      showTitleAi: false,
      showVideoDrawer: false,
      showAccountDrawer: false,
      videoActive: 0,
      videoTitleMethod: 'ai',
      videoTopicMethod: 'ai',
      type: 'account',
      publishTime: [],
      videoList: [],
      videoType: '',
      accountList: [],
      accountType: '',
      mountTypeValue: '',
      videoTitle: {},
      videoTopic: {},
      videoTitleInput: '',
      videoTopicInput: '',
      allVideos: [],
      allAccounts: [],
      groupList: [],
      groupId: [],
      bList: [],
      productLibraryId: [],
      isLibrary: 0,
      pickerOptions: {
        disabledDate(time) {
          const day = 1000 * 60 * 60 * 24
          return time.getTime() < Date.now() - day
        }
      },
      imageUrls: [],
      form: {
        files: []
      }
    }
  },
  computed: {
    pickerOptions2() {
      const day = 1000 * 60 * 60 * 24
      const start = this.ruleForm.publishStart ? Date.parse(this.ruleForm.publishStart) : Date.now() - day
      return {
        disabledDate(time) {
          return time.getTime() < start
        }
      }
    },
    dateComplete() {
      return this.ruleForm.publishStart && this.ruleForm.publishEnd
    },
    mixedVideoIds() {
      return this.ruleForm.imageUrls || this.ruleForm.videoIds
    }
  },
  watch: {
    dateComplete(val) {
      if (val) {
        this.$set(this.ruleForm, 'dateRange', `${this.ruleForm.publishStart},${this.ruleForm.publishEnd}`)
      } else {
        this.$set(this.ruleForm, 'dateRange', null)
      }
    },
    mixedVideoIds(val) {
      if (val) {
        this.$set(this.ruleForm, 'mixedVideoIds', this.ruleForm.imageUrls || this.ruleForm.videoIds)
      } else {
        this.$set(this.ruleForm, 'mixedVideoIds', null)
      }
    }
  },
  async created() {
    if (!this.timeList.length) {
      for (let i = 0; i < 24; i++) {
        this.timeList.push({ checked: false, name: i + '' })
      }
    }
    await this.getGroupList()
    if (this.id) {
      this.handleUpdate()
    }
  },
  methods: {
    handleInput(e, name) {
      this.ruleForm[name] = e
      this[name].list = e.split('\n')
      this[name + 'Input'] = this[name].list.join('\n')
    },
    changeTime() {
      const list = this.timeList.filter(item => item.checked).map(item => item.name)
      this.publishTime = list
      this.$set(this.ruleForm, 'publishTime', list.join(','))
    },
    getMusicItem(list = []) {
      // if (!this.musicList.find(item => item.id === current.id)) {
      //   this.musicList.push(current)
      // }
      this.musicList = list
      this.$set(this.ruleForm, 'musicId', this.musicList.map(item => item.id).join(','))
    },
    getImgResult(data) {
      this.$set(this.ruleForm, 'imageUrls', data.join(','))
      this.imageUrls = data
    },
    async getFile(file) {
      this.form.files.push(file)
      // await this.$refs.upload.submit()
    },
    getUrl(url = '') {
      this.categoryList = []
      this.productLibraryId = []
      this.imageUrls.push(url)
    },
    delImg(index) {
      this.imageUrls.splice(index, 1)
      this.form.files.splice(index, 1)
    },
    async handleGroupChange(ids = []) {
      const funcs = []
      for (let i = 0; i < ids.length; i++) {
        const item = ids[i]
        funcs.push(await this.initListByGroup(item.toString()))
      }
      const resultList = []
      Promise.all(funcs).then((res) => {
        res.forEach((item) => {
          if (Array.isArray(item) && item.length) {
            resultList.push(...item)
          }
        })
        this.getAccountIds(
          {
            value: resultList.map(item => item.id.toString()).join(','),
            list: resultList,
            type: 'group'
          }
        )
      })
    },
    async initListByGroup(id = '') {
      return new Promise((resolve) => {
        if (id) {
          getAccountList({ groupId: id }).then((res) => {
            if (res.success) {
              const { records } = res.result
              resolve(records)
            } else {
              this.$message.error(res.message)
              resolve([])
            }
          })
        }
      })
    },
    async getGroupList() {
      return new Promise(resolve => {
        getGroupList().then(res => {
          if (res.success) {
            this.groupList = res.result.records.map((item) => {
              item.id = item.id.toString()
              return item
            })
          } else {
            this.$error(res.message)
          }
          resolve()
        })
      })
    },
    delCategory(index) {
      this.categoryList.splice(index, 1)
      this.productLibraryId = this.categoryList.map(item => item.id.toString())
    },
    async handleUpdate() {
      await this.init()
      await this.getAllVideo()
      await this.getAllAccount()
      const { videoIds, accountIds, isLibrary, productLibraryId, imageUrls } = this.dbData
      this.videoList = this.allVideos.filter(item => {
        const videoIdList = videoIds.split(',') || []
        return videoIdList.includes(item.id)
      })
      this.accountList = this.allAccounts.filter(item => {
        const accountList = accountIds.split(',') || []
        return accountList.includes(item.id)
      })
      this.isLibrary = isLibrary
      if (isLibrary === 1) {
        if (productLibraryId) {
          if (typeof productLibraryId === 'string') {
            this.productLibraryId = productLibraryId.split(',')
          } else {
            this.productLibraryId = [productLibraryId.toString()]
          }
        }
        this.videoType = 'category'
        const _categoryList = await this.getAllCategory()
        const categoryList = [{ categoryName: '通用素材', id: '0' }, ..._categoryList]
        this.categoryList = categoryList.filter(item => this.productLibraryId.includes(item.id.toString())).map(item => {
          item.checked = true
          item.active = true
          return item
        })
      } else {
        this.videoType = 'video'
      }
      if (imageUrls) {
        const imgList = imageUrls.split(',')
        this.imageUrls = imgList
      }
      console.log('imageUrls', imageUrls, this.imageUrls, this.ruleForm)
    },
    getAllCategory() {
      return new Promise(resolve => {
        getCategoryList().then(res => {
          if (res.success) {
            resolve(res.result.records)
          } else {
            resolve([])
          }
        })
      })
    },
    async deleteVideo(index) {
      this.videoList.splice(index, 1)
      const value = this.videoList.map(item => item.id.toString()).join(',')
      this.$set(this.ruleForm, 'videoIds', value)
    },
    async delAccount(index) {
      this.accountList.splice(index, 1)
      const value = this.accountList.map(item => item.id.toString()).join(',')
      this.$set(this.ruleForm, 'accountIds', value)
    },
    async getAllVideo() {
      const res = await getVideoList()
      if (res.success) {
        this.allVideos = (res.result.records || []).map(item => {
          item.id = item.id.toString()
          return item
        })
      } else {
        this.$message.error(res.message)
      }
    },
    async getAllAccount() {
      const res = await getAccountList()
      if (res.success) {
        this.allAccounts = (res.result.records || []).map(item => {
          item.id = item.id.toString()
          return item
        })
      } else {
        this.$message.error(res.message)
      }
    },
    async init() {
      const res = await getDetail({ id: this.id })
      if (res.success) {
        this.dbData = res.result
        const { videoTitle, videoTopic, platform, groupId } = this.dbData
        if (platform) {
          this.active = this.leftList.findIndex(item => item.value === platform)
        }
        if (groupId) {
          this.groupId = groupId.split(',')
        }

        if (videoTitle) {
          this.videoTitle.list = videoTitle.split('&*&*')
          this.ruleForm.videoTitle = this.videoTitleInput = this.videoTitle.list.join('\n')
        }
        if (videoTopic) {
          this.videoTopic.list = videoTopic.split('&*&*')
          this.ruleForm.videoTopic = this.videoTopicInput = this.videoTopic.list.join('\n')
        }

        for (const key in this.dbData) {
          this.$set(this.ruleForm, key, (this.dbData[key] || ''))
        }
        this.ruleForm.videoSync = this.dbData.videoSync === 1
        this.ruleForm.topicPosition = (this.dbData.topicPosition || this.dbData.topicPosition === 0) ? this.dbData.topicPosition.toString() : ''
        const { mountType } = this.dbData
        this.ruleForm.mountType = mountType
        if (mountType === 'poi') {
          this.mountTypeValue = this.dbData.poiAddress || ''
        }
        if (mountType === 'product') {
          this.mountTypeValue = this.dbData.productShowcase || ''
        }
        if (mountType === 'mini') {
          this.mountTypeValue = this.dbData.miniProgram || ''
        }
        // this.videoType = type
      } else {
        this.$message.error(res.message)
      }
    },
    async trans() {
      if (!this.mountTypeValue.trim()) {
        this.$message.warning('请输入poi地址')
        return
      }
      const res = await transPoi({
        url: this.mountTypeValue
      })
      if (res.success) {
        this.$message.success('转换成功')
        this.mountTypeValue = res.result
      } else {
        this.$message.error(res.message)
      }
    },
    openVideoDrawer(index) {
      this.showVideoDrawer = true
      this.videoActive = index
    },
    getVideoIds(param = {}) {
      const { value, list, type } = param
      this.showVideoDrawer = false
      this.$set(this.ruleForm, 'videoIds', value)

      this.videoType = type
      if (type === 'category') {
        this.productLibraryId = list.map(item => item.id.toString())
        this.isLibrary = 1
        this.categoryList = list
      } else {
        this.productLibraryId = []
        this.isLibrary = 0
        this.videoList = list
      }
      console.log(this.videoType, this.videoList)
    },
    getAccountIds(param = {}) {
      this.showAccountDrawer = false
      const { value, list, type } = param
      this.accountList = list
      this.accountType = type
      if (type !== 'group') {
        this.groupId = []
      }
      this.$set(this.ruleForm, 'accountIds', value)
    },
    getAi(list = []) {
      this.videoTitle = list[0] || {}
      this.videoTopic = list[1] || {}
      const aiForm = list[2] || {}

      this.$set(this.ruleForm, this.videoTitle.name, this.videoTitle.list.join('\n'))
      this.$set(this.ruleForm, this.videoTopic.name, this.videoTopic.list.join('\n'))
      this.$set(this.ruleForm, 'topicPosition', aiForm.topicPosition || '')
      this.showTitleAi = false
    },
    getTime(list = []) {
      this.$set(this.ruleForm, 'publishTime', list.join(','))
    },
    async submit(submitType = 'add') {
      if (this.imageUrls && this.imageUrls.length) {
        await this.$refs.upload.submit()
      }
      this.$refs.ruleForm.validate(async valid => {
        if (valid) {
          let poiAddress = ''
          let miniProgram = ''
          let productShowcase = ''
          if (this.ruleForm.mountType === 'poi') {
            poiAddress = this.mountTypeValue
            this.ruleForm.microAppTitle = ''
            this.ruleForm.microAppUrl = ''
          }
          if (this.ruleForm.mountType === 'mini') {
            miniProgram = this.mountTypeValue
          }
          if (this.ruleForm.mountType === 'product') {
            productShowcase = this.mountTypeValue
            this.ruleForm.microAppTitle = ''
            this.ruleForm.microAppUrl = ''
          }
          const videoTitle = this.ruleForm.videoTitle.split('\n').join('&*&*')
          const videoTopic = this.ruleForm.videoTopic.split('\n').join('&*&*')
          let tid = ''
          if (this.ruleForm.tid && this.ruleForm.tid.length) {
            tid = this.ruleForm.tid[1] || ''
          }

          const param = {
            ...this.ruleForm,
            tid,
            videoTitle,
            videoTopic,
            poiAddress,
            miniProgram,
            productShowcase,
            videoSync: this.ruleForm.videoSync ? 1 : 0,
            taskType: this.taskType,
            platform: this.leftList[this.active].value,
            groupId: this.groupId.join(','),
            productLibraryId: this.productLibraryId.join(','),
            isLibrary: this.isLibrary
          }
          console.log('param', param)
          let res = {}
          if (submitType === 'add') {
            res = await addTask(param)
          } else {
            res = await updateTask({ ...param, id: this.id })
          }
          if (res.success) {
            this.$message.success('操作成功')
            this.$emit('back')
          } else {
            this.$message.error(res.message)
          }
        } else {
          this.$message.warning('请完善信息')
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.dark-placeholder{
  >>> .el-input__inner{
    border-radius: 5px !important;
  }
}
.el-checkbox{
  margin-right: 15px;
}
.index{
  color: #006FFF;
}
.btn-mr{
  margin-right: 35px;
}
.lg-btn{
  width: 150px;

}
.video-item {
    width: 140px;
    height: 250px;
    margin-bottom: 30px;
    margin-right: 30px;
    .poster {
      width: 140px;
      height: 220px;
    }
  }
.dir-img {
    width: 70px;
    margin-bottom: 10px;
  }
  .dir-name {
    font-size: 20px;
    font-weight: 400;
    color: rgba(0, 0, 0, 1);
  }
.ai-box {
  width: 500px;
  height: 100px;
  border-radius: 5px;
  background: rgba(166, 166, 166, 0.1);
  border: 1px solid rgba(216, 224, 240, 1);
  box-shadow: 0px 1px 2px rgba(184, 200, 224, 0.22);
  margin-top: 20px;
}
.time-box {
  border-radius: 5px;
  margin-top: 10px;
  background: rgba(166, 166, 166, 0.1);
  border: 1px solid rgba(216, 224, 240, 1);
  box-shadow: 0px 1px 2px rgba(184, 200, 224, 0.22);
  box-sizing: border-box;
  padding: 16px;
  .time-box-checklist{
    display: grid;
    grid-template-columns: repeat(12,1fr);
  }
}
.sub {
  font-size: 14px;
  font-weight: 400;
  color: rgba(128, 128, 128, 1);
}
.el-form-item {
  margin-bottom:39px;
  &:last-child {
    margin-bottom: 0;
  }
}
.part-mt {
  margin-top: 30px;
}
.semi {
  width: 500px;
}
.qa {
  width: 14px;
  height: 14px;
  position: relative;
  right: 45px;
    top: 2px;
}
.arrow {
  width: 11px;
  height: 7px;
  margin-right: 6px;
}
.icon-box {
  font-size: 20px;
  font-weight: 400;
  color: rgba(0, 0, 0, 1);
  height: 120px;
  .icon {
    margin-right: 20px;
  }
}
.icon-box.active {
  background: linear-gradient(
    135deg,
    rgba(47, 76, 221, 1),
    rgba(150, 85, 242, 1)
  );
  color: #fff;
}
.icon {
  width: 70px;
  height: 70px;
}
.icon-mr {
  margin-right: 50px;
}
.sicon-mr {
  margin-right: 30px;
}
.text-box {
  word-break: break-all;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.item {
  font-size: 20px;
  white-space: nowrap;
}
.grid-2 {
  display: grid;
  grid-template-columns: 60% 1fr;
  .left {
    .grid-3 {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      .item {
        margin-right:25px;
      }
    }
  }
}
</style>

